import React, {useState}from "react";
import { Upload, message } from "antd";
import { LoadingOutlined, PlusOutlined } from "@ant-design/icons";
import type { RcFile, UploadChangeParam, UploadFile, UploadProps } from "antd/es/upload/interface";
import CommonFlex from "../CommonFlex/index";
import "./index.less";

interface Props {
    label: string; // 标题文本
    value: string | number;
    // onChange: (value: string) => void
  }
const LabeIUpload = (props: any) => {
    const [loading, setLoading] = useState(false);
    const [imageUrl, setImageUrl] = useState<string>();

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const { value } = e.target;
        props.onChange(value);
    };


    const uploadButton = (
        <div>
          {loading ? <LoadingOutlined /> : <PlusOutlined />}
          <div style={{ marginTop: 8 }}>Upload</div>
        </div>
    );
    // const handleChange: UploadProps["onChange"] = (info: UploadChangeParam<UploadFile>) => {
    //     if (info.file.status === "uploading") {
    //       setLoading(true);
    //       return;
    //     }
    //     if (info.file.status === "done") {
    //       // Get this url from response in real world.
    //       getBase64(info.file.originFileObj as RcFile, url => {
    //         setLoading(false);
    //         setImageUrl(url);
    //       });
    //     }
    //   };

    // const beforeUpload = (file: RcFile) => {
    //     const isJpgOrPng = file.type === "image/jpeg" || file.type === "image/png";
    //     if (!isJpgOrPng) {
    //       message.error("You can only upload JPG/PNG file!");
    //     }
    //     const isLt2M = file.size / 1024 / 1024 < 2;
    //     if (!isLt2M) {
    //       message.error("Image must smaller than 2MB!");
    //     }
    //     return isJpgOrPng && isLt2M;
    // };

    return (
        <CommonFlex>
            {props.label}
            <Upload
                name="avatar"
                listType="picture-card"
                className="avatar-uploader"
                showUploadList={false}
                action=""
                >
                {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: "100%" }} /> : uploadButton}
            </Upload>
        </CommonFlex>
    );
};
export default LabeIUpload;